<template>
  <view class="wrapper" @tap.stop="navToDetail(info)">
    <view class="block-246 margin-right-sm">
      <image :src="info.thumb" mode="aspectFill" lazy-load></image>
    </view>
    <view class="content">
      <view class="text-df text-333 text-cut-2">
        <block v-if='info.goods_label'>
        <text  class="item-goods-label" v-for='item in info.goods_label'>
          {{item}}
        </text>
      </block>

        {{info.name}}
      </view>
      <view class="text-sm text-cut">{{info.keywords}}</view>
      <view class="flex justify-between align-end">
        <view class="fu-cred">
          <text class="text-price text-bold text-sm"></text>
          <text class="text-bold text-lg">{{info.shop_price}}</text>
          <block v-if='info.goods_label_activity'>
          <text  class="item-activity-label" v-for='item in info.goods_label_activity'>
            {{item}}
          </text>
        </block>
          <br>
          <text class="text-through text-sm text-price text-999">{{info.market_price}}</text>
        </view>
        <view>
          <text class="text-sm text-999">月销量{{info.sales_sum}}件</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      info: {
        type: Object
      },
    },
    watch: {
      info(val) {
        console.log(val.name, val);
      }
    },
    methods: {
      navToDetail(item) {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail',
          params: {
            sku_id: item.sku_id || 0,
            goods_id: item.id,
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    /* min-height: 570rpx; */
    padding: 20rpx;
    border-radius: 24rpx;
    overflow: hidden;
    background-color: #FFFFFF;
    margin-top: 20rpx;
    display: flex;

    .block-246 {
      width: 246rpx;
      height: 246rpx;
      border-radius: 6rpx;
      background-color: #EEEEEE;

      image {
        width: 100%;
        height: 100%;
        border-radius: 6rpx;
      }
    }

    .content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .text-through {
    text-decoration: line-through;
  }

  .text-999 {
    color: #999999;
  }
  .item-goods-label{
	background-image: linear-gradient(to right, #Ff9700 ,#Ed1c24);
	padding:2rpx 5rpx;
	color: #ffffff;
	font-size: 24rpx;
	border-radius: 6rpx;
  margin-right: 9rpx;
}

.item-activity-label {
    padding: 2rpx 5rpx;
    /* margin: 5rpx; */
    font-size: 24rpx;
    border-radius: 6rpx;
    border: 1px solid;
    /* margin: 0rpx 5px 0px; */
    display: inline-block;
    transform:scale(.8)
  }
</style>